How to display div elements inline using CSS?

First, we will create a basic HTML code for the div elements and apply different CSS styling to make it display inline. In this article, we will use below CSS properties. Display: We will use display: flex and display: inline-block property to show div elements inline. Float: We will use the float: left property to show div elements side by side.

What is an inline element?

An inline element only takes up as much width as necessary. This is a element inside a paragraph. Note: An inline element cannot contain a block-level element! The element is often used as a container for other HTML elements. The element has no required attributes, but style, class and id are common.

Should a Div be a span or a inline Div?

An inline div is a freak of the web & should be beaten until it becomes a span (at least 9 times out of 10)... ...answers the original question... There are times when you want divs to display inline, for example, when you want to add a margin on the left and right of an element. I don't think that can be done with a span.

How do I make a Div occupy an entire line?

Divs are block level elements, so by default they will always occupy an entire line. The way to change this is to float the divs: And to start a next inline element on a new line, add style="clear: both" to that element.